CSS Full Course Day 9 [Hindi] 💻 | Advanced Flexbox (Align, Wrap) 🚀 | Mohit Decodes

CSS Tutorial – Day 9: Advanced Flexbox (Align & Wrap)

Welcome to Day 9 of the CSS Full Course [Hindi] by Mohit Decodes! Today we’ll dive deeper into Flexbox and learn advanced properties for better alignment and wrapping.

🔹 Important Flexbox Properties for Advanced Layouts

  1. align-content
  2. Controls the spacing between rows when flex items wrap to multiple lines. Works only when there’s wrapping.
  3. align-self
  4. Overrides align-items for individual flex items, allowing custom vertical alignment per item.
  5. flex-wrap
  6. Controls whether flex items should wrap to the next line or stay in a single line. Values:
  7. nowrap (default)
  8. wrap
  9. wrap-reverse
  10. flex-grow, flex-shrink, flex-basis
  11. Control how flex items grow or shrink to fill available space.

⚙️ Example CSS:

css
CopyEdit
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 300px;
background-color: #e3f2fd;
}

.item {
background-color: #2196F3;
color: white;
padding: 20px;
margin: 5px;
flex-grow: 1;
flex-basis: 150px;
align-self: center;
}

💡 Tips:

  1. Use flex-wrap: wrap; for responsive rows of items
  2. align-content manages spacing between multiple rows
  3. align-self allows flexible control of single item alignment
  4. Combine flex-grow and flex-shrink for dynamic sizing